<template>
  <div class="success-container py-7 mx-auto px-4 max-w-8xl sm:px-6 lg:px-4">
    <div class="breadcrumbs space-x-2 text-base max-w-7xl mx-auto flex flex-wrap items-center">
      <common-link path="/"
        class="text-gray-1000 hover:text-purple-1200 go-home">
        {{$t('home')}}
      </common-link>
      <svg-icon className="text-gray-1800 text-mini text-slate-400 mx-3"
        iconName='right_outlined'></svg-icon>
      <span class="text-gray-1400 text-base">
        {{$t('submitTool')}}
      </span>
    </div>
    <div class="pt-12 pb-12 sm:pt-32 sm:pb-36">
      <svg-icon className="block mx-auto text-6xl"
        iconName='Successfully'></svg-icon>
      <div class="text-center mt-3">
        <h1 class="text-4xl font-extrabold text-gray-1000 tracking-tight break-words">{{$t('submitSuccessfully')}}</h1>
        <p class="mt-2 text-base text-gray-1000 break-words">{{$t('thankYouYourSubmission')}}</p>
      </div>
      <div class="mt-10 flex text-center">
        <common-link path="/"
          class="inline-flex justify-center items-center w-40 mx-auto items-center px-4 py-2 border border-transparent text-lg rounded-md text-white bg-purple-1300 hover:bg-purple-1200 go-home">
          {{$t('home')}}
        </common-link>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'SuccessPage',
  head() {
    return {
      htmlAttrs: {
        lang: this.locale,
      },
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.description,
        },
        {
          hid: 'og:description',
          name: 'og:description',
          content: this.description,
        },
        {
          hid: 'og:url',
          name: 'og:url',
          content: this.canonicalLink,
        },
      ],
      link: [
        {
          rel: 'canonical',
          href: this.canonicalLink,
        },
      ],
    }
  },
  async asyncData({ app, route, params, query, $axiosApi, store }) {
    let pageDesc = app.$cookies.get('pageDesc')
    try {
      let [langRes] = await Promise.all([await $axiosApi.getLanguagesMul()])

      let description
      let curLocale = store.state.locale
      if (
        langRes.code === 200 &&
        langRes.data &&
        langRes.data.languages &&
        langRes.data.languages.description &&
        langRes.data.languages.description.length > 0 &&
        langRes.data.languages.description[0].content &&
        (langRes.data.languages.description[0].content[curLocale] ||
          langRes.data.languages.description[0].content.default)
      ) {
        if (langRes.data.languages.description[0].content[curLocale]) {
          description = langRes.data.languages.description[0].content[curLocale]
        } else {
          description = langRes.data.languages.description[0].content.default
        }

        app.$cookies.set('pageDesc', description, {
          maxAge: 60 * 60 * 24 * 7,
          path: '/',
        })
      } else if (pageDesc) {
        description = pageDesc
      }

      return {
        description,
      }
    } catch (err) {
      console.log(err)
    }
  },
  computed: {
    ...mapState({
      locale: (state) => state.locale,
    }),
  },
  data() {
    return {
      description: null,
      canonicalLink: `https://www.toolify.ai${this.$route.fullPath}`,
    }
  },
}
</script>
